<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bubbles</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link type="text/css" href="https://raw.github.com/commons/common.css/master/build/common.css" rel="stylesheet">
<link type="text/css" href="main.less" media="screen" rel="stylesheet/less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Bubble</h1>
<p class="usage">Default mixin syntax: <pre class="usage">.bubble(@width: auto, @height: auto, @margin:auto, @padding:auto, @bgcolor: black, @hover:#ccc, @pos:50%, @radius:15px, @tip:15px )</pre>
<div class="bubble1"><p><pre>
.bubble1 {
.bubble(40%, 200px, 20px 20px 70px 20px, @padding-max, @bubblecolor, @bubblehover, 20%, 10px, 50px);

color:#fff;
}</pre></p></div>

<div class="bubble2"><p><pre>
.bubble2 {
.bubble(200px, auto, @margin-max, @padding-max, #1337AD, darken(#1337AD, 10%), 50%, 15px, 20px);

color:#fff;
}</pre></p></div>

<div class="bubble3"><p><pre>
.bubble3 {
.bubble(500px, 500px, @margin-max, 50px, #91bd09, #749a02, 50%, 150px, 20px);

float:left;
color:#fff;
}</pre></p></div>

<div class="bubble4">
<div>
<p><pre>
.bubble4 {
.bubble(500px, 500px, @margin-max, 150px, #a9014b, lighten(#a9014b, 20%), 50%, 250px, 20px);

float:left;
color:#fff;
display:table;
div {
  display:table-cell; 
  vertical-align:middle;
  }
}</pre></p></div>
</div>
</body>
</html>